<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>绑定手机验证码</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #F2F2F2;
            /*border: 1px red solid;*/
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #FFFFFF;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .username{
                    margin-left: 20px;
                }
            }
        }

        .user-contain{
            width: 1200px;
            height: 900px;
            margin-top: 40px;
            display: flex;
            flex-direction: row;
            background: #F2F2F2;
            /*border: 1px red solid;*/
        }
        .user-left-wrap{
            /*padding-bottom: 20px;*/
            width: 280px;
            margin-right: 20px;
            /*height: 600px;*/
            background: #FFFFFF;
        }

        .user-left-wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 700px;
            .left-title{
                width: 280px;
                height: 80px;
                font-size: 24px;
                border-bottom: 1px solid rgba(200, 200, 200, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .left-nav{
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .nav-item{
            width: 200px;
            height: 80px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            /*border:1px red solid;*/
            .nii-info{
                background: url("/static/images/register-info.png") 100% 100%;
            }
            .nii-job{
                background: url("/static/images/register-job.png") 100% 100%;
            }
            .nii-msg{
                background: url("/static/images/register-msg.png") 100% 100%;
            }
            .nii-mana{
                background: url("/static/images/register-mana.png") 100% 100%;
            }
            .nii-setting{
                background: url("/static/images/register-setting.png") 100% 100%;
            }
            .nii-logout{
                background: url("/static/images/register-logout.png") 100% 100%;
            }
            .nav-item-icon{
                width: 24px;
                height: 24px;
                background-size: contain;
                margin-right: 10px;
            }
            .nav-item-title a{
                font-size: 20px;
                text-decoration: none;
                color: black;
            }
        }

        .user-right-wrap{
            width: 900px;
            display: flex;
            flex-direction: column;
            /*border:1px red solid;*/
        }

        .user-main{
            width: 900px;
            height: 700px;
            background: #FFFFFF;

        }

        .title-wrap{
            width: 900px;
            height: 80px;
            line-height: 80px;
            padding-left: 20px;
            font-size: 20px;
            border-bottom: 1px solid #bfcdda;
        }
        .main-content-wrap{
            padding: 20px;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            .content-item{
                padding: 40px 0;
                display: flex;
                flex-direction: column;
            }
            .content-item div{
                margin-bottom: 30px;
            }
            .content-item label{
                width: 150px;
                text-align: right;
            }
            .content-item input{
                width: 500px;
                height: 50px;
                font-size: 16px;
                border-radius: 5px;
                border: 0.1pt solid rgba(220, 220, 220, 0.5);
                padding-left: 20px;
            }
            .photo-wrap div:nth-child(2){
                font-size: 16px;
                color: #8a8a8a;
            }
            .phone-wrap{
                display: flex;
            }
            .cert-btn-wrap{
                margin-left: 150px;
                width: 210px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                border-radius: 5px;
                background: #8B9CAC;
                color: #FFFFFF;
            }
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="../index.php">haishuyun</a></div>
        </div>
        <div class="user-wrap">
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像">
            </div>
            <div class="username"><a href="main-page.php">用户99887766</a></div>
        </div>
    </div>
    <div class="user-contain">
        <div class="user-left-wrap">
            <div class="left-title">用户中心</div>
            <div class="left-nav">
                <div class="nav-item">
                    <div class="nav-item-icon nii-info"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">基础资料</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-job"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">我的求职</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-msg"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">我的消息</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-mana"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">企业管理</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-setting"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">企业设置</a></div>
                </div>
                <div class="nav-item">
                    <div class="nav-item-icon nii-logout"></div>
                    <div class="nav-item-title"><a  href="javascript:void(0)" onclick="toUserNav()">退出登录</a></div>
                </div>
            </div>
        </div>
        <div class="user-right-wrap">
            <div class="user-main">
                <div class="title-wrap">
                    <div class="title-name">我的设置</div>
                    <div class="hr1"></div>
                </div>
                <div class="main-content-wrap">
                    <div class="content-item">
                        <div class="phone-wrap">
                            <label for="username">手机号码：</label>
                            <div>199****1234</div>
                        </div>
                        <div class="id-input-wrap">
                            <label for="userid">验证码：</label>
                            <input name="userid" id="userid" placeholder="请输入手机验证码">
                        </div>
                        <div class="cert-btn-wrap"><a href="javascript:void(0)" onclick="bindNewPhone()">下一步</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //提交认证
    function bindNewPhone(){
        window.location.href="bind-phone-new.php";
    }
</script>
</html>